<template>
  <div>
    <y-card>
      <el-row class="row">
        <el-col :span="4">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :props="defaultProps"
          />
        </el-col>
        <el-col :span="14">
          <baidu-map class="map" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @ready="handler" @click="pick">
            <bm-polyline :path="path" stroke-color="#3ddb49" :editing="true" @lineupdate="updatePolylinePath" />
            <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" fill-color="blue" :fill-opacity="0.2" />
          </baidu-map>
        </el-col>
        <el-col :span="6">
          <el-button style="margin: 5px" @click="fetch">获取</el-button>
          <el-button style="margin: 5px" @click="round">封闭</el-button>
          <el-button style="margin: 5px" @click="switchButton">switchButton</el-button>
          <el-tag
            v-for="(point, index) in path"
            :key="index"
            closable
            style="margin: 5px"
            @close="remove(index)"
          >
            经度: {{ point.lng }} - 纬度: {{ point.lat }}
          </el-tag>
        </el-col>
      </el-row>
    </y-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 10,
      path: [],
      polygonPath: [],
      move: true,
      BMap: null,
      map: null,
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.BMap = BMap
      this.map = map
      this.center.lng = 120.623035
      this.center.lat = 29.986249
      this.zoom = 15
    },
    pick(e) {
      if (this.move) {
        // todo 根据选择中心点，还是选择界限区分
        console.log(e)
        this.path.push(e.point)
      }
    },
    remove(index) {
      this.path.splice(index, 1)
    },
    fetch() {
      const a = new this.BMap.Boundary()
      a.get('越城区', b => {
        if (b.boundaries.length === 0) {
          alert('无区域')
          return
        }
        const listPoint = b.boundaries[0].split(';')
        listPoint.forEach(e => {
          const p = e.split(',')
          this.path.push({ 'lng': p[0].trim(), 'lat': p[1].trim() })
        })
      })
    },
    round() {
      this.polygonPath.splice(0, this.polygonPath.length)
      this.polygonPath.push.apply(this.polygonPath, this.path)
      this.path.splice(0, this.path.length)
    },
    lineDbclick() {
      this.round()
    },
    updatePolylinePath(e) {
      this.path.splice(0, this.path.length)
      this.path.push.apply(this.path, e.target.getPath())
    },
    switchButton() {
      this.move = !this.move
    }
  }
}
</script>

<style lang="scss">
.map {
  width: 100%;
  height: 600px;
}
.row {
  overflow: hidden;
}
</style>
